<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加会员</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../backstage/css/x-admin.css" media="all">
</head>

<body>
    <div class="y-body">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="username" class="layui-form-label">
                    <span class="x-red">*</span>用户名
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="username" name="username" required="" lay-verify="username" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>将会成为您唯一的登入名
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>等级
                </label>
                <div class="layui-input-inline">
                    <select name="role">
                        <option value="LV1">LV1</option>
                        <option value="LV2">LV2</option>
                        <option value="LV3">LV3</option>
                        <option value="LV4">LV4</option>
                        <option value="LV5">LV5</option>
                        <option value="LV6">LV6</option>
                        <option value="LV7">LV7</option>
                        <option value="LV8">LV8</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="phone" class="layui-form-label">
                    <span class="x-red">*</span>手机号码
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="phone" name="phone" required="" lay-verify="phone" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>将会成为您唯一的登入名
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_integral" class="layui-form-label"> <span class="x-red">*</span>积分</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_integral" name="integral" required="" lay-verify="required"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class='x-red' style="width: 200px;">*</span>开通日期
                </label>
                <div class="layui-input-inline">
                    <input class="layui-input-add" placeholder="会员开通日期" id="LAY_demorange_s" autocomplete="off" style="width: 300px;">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class='x-red'>*</span>到期日期
                </label>
                <div class="layui-input-inline">
                    <input class="layui-input-add" placeholder="会员到期日期" id="LAY_demorange_x" autocomplete="off" style="width: 300px;">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"> </label>
                <button class="layui-btn" lay-filter="add" lay-submit=""> 添加 </button>
            </div>
        </form>
    </div>
    <script src="../../../backstage/lib/layui/layui.js" charset="utf-8"></script>
    <script src="../../../backstage/js/x-layui.js" charset="utf-8"></script>
    <script>
    layui.use(['laydate', 'form', 'layer'], function() {
        $ = layui.jquery;
        laydate = layui.laydate; //日期插件
        form = layui.form(),
            layer = layui.layer;

        var start = {
            min: laydate.now(),
            max: '2099-06-16 23:59:59',
            istoday: false,
            choose: function(datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };


        var end = {
            min: laydate.now(),
            max: '2099-06-16 23:59:59',
            istoday: false,
            choose: function(datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        document.getElementById('LAY_demorange_s').onclick = function() {
            start.elem = this;
            laydate(start);
        }
        document.getElementById('LAY_demorange_x').onclick = function() {
            end.elem = this
            laydate(end);
        }

        //自定义验证规则
        form.verify({
            username: function(value) {
                if (value.length < 5) {
                    return '用户名至少5个字符';
                }
            },
            pass: [/(.+){6,12}$/, '密码必须6到12位'],
            repass: function(value) {
                if ($('#L_pass').val() != $('#L_repass').val()) {
                    return '两次密码不一致';
                }
            }
        });

        //监听提交
        form.on('submit(add)', function(data) {
            console.log(data);
            //发异步，把数据提交给php
            layer.alert("添加成功", { icon: 6 }, function() {
                var index = parent.layer.getFrameIndex(window.name); // 获得frame索引
                parent.layer.close(index); //关闭当前frame
            });
            return false;
        });
    });
    </script>
</body>
</html>